<template>
  <div>
      <div v-for="(item,index) in list" :key="index" class="mall_container">
          <div class="mall_wrapper_checked">
              <input type="checkbox">
          </div>
          <div class="mall_wrapper_img">
              <img :src="item.productImage" alt="">
          </div>
          <div class="mall_wrapper_title">
              <div style="width:100%">{{item.productName}}</div>
              <div>￥{{item.salePrice}}</div>
          </div>
          <div class="mall_value_count">
              <div style="width:100%"><van-stepper v-model="item.num" /></div>
              <div><button @click="onClickDelete(index)">删除</button></div>
          </div>
          
              <div class="mall_bottom">
          <div>全选<input type="checkbox"></div>
          <div>总价:{{Price}}</div>
          <div>数量:{{Num}}</div>
      </div>
      </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            list:[],
            // isShowChecked:false
        }
    },
    mounted(){
        this.list = this.$store.state.data;
        console.log(this.$store.state.data);
    },
    methods:{
    onClickDelete(index){
        this.$store.commit('Delete',index)
    }
    },
    computed:{
        Num(){
            let num = 0;
            this.list.forEach(item=>{
                num += item.num
            })
            return num;
        },
        Price(){
            let Prices = 0;
            this.list.forEach(item=>{
                Prices += item.num * item.salePrice
            })
            return Prices
        }
    }
}

</script>

<style>
.mall_container
{
    width: 100%;
    height: 10rem;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mall_wrapper_checked
{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mall_wrapper_img
{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mall_wrapper_img img
{
    width: 25%;
}
.mall_wrapper_title
{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.mall_value_count
{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.mall_bottom
{
    width: 100%;
    height: 4rem;
    border: 1px solid black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    flex: 0;
    background: white;
}
</style>